<template>
  <Form ref="form" mode="twocolumn" :model="form" :rules="{}" :labelWidth="100">
    <FormItem label="ID:" required prop="name">
      <input type="text" v-model="form.name" :readonly="!isAdd" @change="onNameChange"/>
    </FormItem>
    <FormItem label="服务名:" required prop="serviceName">
      <input type="text" v-model="form.serviceName"/>
    </FormItem>
    <FormItem label="名称:" required prop="title" single>
      <input type="text" v-model="form.title"/>
    </FormItem>
    <FormItem label="服务器:" required prop="server">
      <Select :datas="servers" v-model="form.server" v-if="isAdd"/>
      <input type="text" v-model="form.server" readonly v-else/>
    </FormItem>
    <FormItem label="端口:" required prop="port">
      <NumberInput v-model="form.port"/>
    </FormItem>
    <FormItem label="类型:" required prop="type">
      <Select :datas="['jar','command','url']" v-model="form.type" v-if="isAdd"/>
      <input type="text" v-model="form.type" readonly v-else/>
    </FormItem>
    <FormItem label="状态">
      <h-switch v-model="form.enabled">
        <span slot="open">启用</span>
        <span slot="close">禁用</span>
      </h-switch>
    </FormItem>
    <template v-if="form.type=='command'">
      <FormItem label="工作目录" prop="workDir" required single>
        <input type="text" v-model="form.workDir" />
      </FormItem>
      <FormItem label="命令" prop="commands" required single>
        <input type="text" v-model="form.commands"/>
      </FormItem>
    </template>
    <template v-if="form.type=='jar'">
      <FormItem label="VM参数" prop="vmOptions" single>
        <input type="text" v-model="form.vmOptions"/>
      </FormItem>
      <FormItem label="应用参数" prop="arguments" single>
        <input type="text" v-model="form.arguments"/>
      </FormItem>
    </template>
    <FormItem v-if="form.type=='url'" label="URL" prop="url" single>
      <input type="text" v-model="form.url"/>
    </FormItem>
<!--    <FormItem v-if="form.type!='url'" label="自动启动">-->
<!--      <h-switch v-model="form.auto">-->
<!--        <span slot="open">自启动</span>-->
<!--        <span slot="close">不启动</span>-->
<!--      </h-switch>-->
<!--    </FormItem>-->
    <FormItem label="网关代理">
      <h-switch v-model="form.mapping">
        <span slot="open">启用</span>
        <span slot="close">禁用</span>
      </h-switch>
    </FormItem>
    <FormItem v-if="form.mapping&&form.type!='url'" label="代理地址" prop="mappingPath" single>
      <input type="text" v-model="form.mappingPath" placeholder="服务的映射到网关的路径,不带ip和端口"/>
    </FormItem>
    <FormItem v-if="form.mapping" label="代理配置" prop="mappingSetting" single>
      <input type="text" v-model="form.mappingSetting" placeholder="nginx中对应服务项的配置"/>
    </FormItem>
    <FormItem label="服务发现">
      <h-switch v-model="form.found">
        <span slot="open">启用</span>
        <span slot="close">禁用</span>
      </h-switch>
    </FormItem>
    <FormItem v-if="form.found&&form.type!='url'" label="ContextPath" prop="contextPath" single>
      <input type="text" v-model="form.contextPath" placeholder="服务的ContextPath或完整调用路径"/>
    </FormItem>

    <FormItem label="首页" prop="index" single>
      <div class="h-input-group">
        <input type="text" v-model="form.home"/>
        <span class="text-hover" style="padding:0 10px" @click="gotoHome">跳转</span>
      </div>
    </FormItem>
    <FormItem label="备注" prop="memo" single>
      <input type="text" v-model="form.memo"/>
    </FormItem>
    <FormItem v-if="!isAdd&&form.type!='url'" label="上次启动时间" prop=" lastStartTime" single>
      <input type="text" v-model="form. lastStartTime" readonly/>
    </FormItem>

    <FormItem v-if="isAdd" single style="text-align: right">
      <Button :loading="submitting" color="primary" @click="save">确定</Button>
    </FormItem>
    <FormItem v-else single style="text-align: right">
      <div style="float:left;color:#d3d3d3" v-if="form.processId">PID:{{form.processId}}</div>
      <Poptip content="会同时删除服务配置及对应文件夹,确认删除?" @confirm="deleteService">
        <Button icon="h-icon-trash">删除</Button>
      </Poptip>
      <FileInput accept=".jar" @change="updateFile" v-if="form.type=='jar'">
        <Button icon="h-icon-outbox">上传文件</Button>
      </FileInput>
      <Button icon="h-icon-check" @click="update">保存修改</Button>
    </FormItem>
  </Form>
</template>
<script>
import {ajax, util} from 'framework'

export default {
  props: {
    service: {
      type: Object,
      default: {}
    },
    isAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      servers: [],
      submitting: false,
      form: {
        enabled:true,
        serviceName:'',
        name: '',
        title: '',
        server: '',
        port: '',
        type: '',
        workDir: '',
        commands: '',
        auto: false,
        mapping: false,
        found:false,
        mappingPath: '',
        mappingSetting: '',
        url:'',
        processId:'',
        contextPath:'',
        memo:'',
        lastStartTime:''
      }
    }
  },
  mounted() {
    Object.assign(this.form, this.service)
    if (this.isAdd) {
      ajax.get("server/list_servers").then(r => {
        this.servers = r.data
      })
    }
  },
  watch: {
    service: {
      handler(nv, ov) {
        util.clean(this.form)
        Object.assign(this.form, nv)
      },
      immediate: true
    }
  },
  beforeDestroy() {

  },
  methods: {
    onNameChange(){
      if(!this.form.serviceName){
        this.form.serviceName=this.form.name
      }
    },
    updateFile(file) {
      //updateFile
      let uploadService = Object.assign({}, this.service);
      uploadService.file = file
      if (file.length > 0) {
        ajax.upload("server/service_upload", uploadService).then(r => {
          this.$Message("已经更新文件")
        }).catch(r => {
          this.$Message("更新失败")
        })
      }
    },
    update() {
      let u = Object.assign({}, this.form);
      ajax.post("server/save_service", u).then(r => {
        this.$Message("已经更新")
        this.$emit('change')
      }).catch(e => {
        this.$Message.error(e.description);
      })
    },
    save() {
      let validResult = this.$refs.form.valid();
      let self = this;
      if (validResult.result) {
        this.submitting = true;
        ajax.post("server/add_service", this.form).then(r => {
          this.$emit("change")
          self.submitting = false;
          this.$Message.info("已创建");

        }).catch(e => {
          this.submitting = false;
          this.$Message.error(e.description);
        })
      } else {
        this.$Message.error(`还有${validResult.messages.length}个错误未通过验证。`);
      }
    },
    deleteService() {
      ajax.post("server/del_service", this.service).then(r => {
        this.$Message("已经删除")
        util.clean(this.form)
        this.$emit('change')
        this.$emit('close')
      }).catch(e => {
        this.$Message.error(e.description);
      })
    },
    gotoHome() {
      let url = this.service.home;
      if (/https?:\/\//.test(url)) {
      } else if (url.startsWith("/")) {
        url = "http://" + this.service.server + ":" + this.service.port + url
      } else {
        url = "http://" + this.service.server + ":" + this.service.port + "/" + url
      }
      window.open(url, '_blank')
    }
  }
}
</script>
